<template>
  <div class="app-container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="logo">
        <h1>在线工具集合</h1>
      </div>
      <div class="theme-switch">
        <el-switch
          v-model="isDarkMode"
          @change="toggleTheme"
          active-text="暗色"
          inactive-text="亮色"
        />
      </div>
    </header>

    <div class="main-container">
      <!-- 左侧菜单 -->
      <aside class="sidebar">
        <el-menu
          :default-active="activeMenu"
          :default-openeds="openedMenus"
          class="menu"
          @select="handleMenuSelect"
        >
          <el-sub-menu index="json">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>JSON工具</span>
            </template>
            <el-menu-item index="json-format">JSON格式化</el-menu-item>
            <el-menu-item index="json-compress">JSON压缩</el-menu-item>
            <el-menu-item index="json-to-xml">JSON转XML</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="js">
            <template #title>
              <el-icon><Monitor /></el-icon>
              <span>JS工具</span>
            </template>
            <el-menu-item index="js-format">JS格式化</el-menu-item>
            <el-menu-item index="js-compress">JS压缩</el-menu-item>
            <el-menu-item index="js-obfuscate">JS混淆</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="xml">
            <template #title>
              <el-icon><Folder /></el-icon>
              <span>XML工具</span>
            </template>
            <el-menu-item index="xml-format">XML格式化</el-menu-item>
            <el-menu-item index="xml-compress">XML压缩</el-menu-item>
            <el-menu-item index="xml-to-json">XML转JSON</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="image">
            <template #title>
              <el-icon><Picture /></el-icon>
              <span>图片工具</span>
            </template>
            <el-menu-item index="image-compress">图片压缩</el-menu-item>
            <el-menu-item index="image-table">表格识别</el-menu-item>
            <el-menu-item index="image-background">去除背景</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="text">
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>文本工具</span>
            </template>
            <el-menu-item index="text-base64">Base64编解码</el-menu-item>
            <el-menu-item index="text-url">URL编解码</el-menu-item>
            <el-menu-item index="text-unicode">Unicode编解码</el-menu-item>
            <el-menu-item index="text-case">大小写转换</el-menu-item>
            <el-menu-item index="text-naming">命名格式转换</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="ai">
            <template #title>
              <el-icon><MagicStick /></el-icon>
              <span>AI工具</span>
            </template>
            <el-menu-item index="ai-tts">文本转语音</el-menu-item>
            <el-menu-item index="ai-stt">语音转文本</el-menu-item>
            <el-menu-item index="ai-writer">推文生成</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </aside>

      <!-- 主内容区 -->
      <main class="content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Document,
  Monitor,
  Folder,
  Picture,
  EditPen,
  MagicStick
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeMenu = ref('json-format')
const isDarkMode = ref(false)

// 计算当前应该展开的子菜单
const openedMenus = computed(() => {
  const routeName = route.name
  if (!routeName) return []
  // 从路由名称中提取父菜单名称（例如 'json-format' -> 'json'）
  return [routeName.split('-')[0]]
})

watch(
  () => route.name,
  (newRouteName) => {
    if (newRouteName) {
      activeMenu.value = newRouteName
    }
  },
  { immediate: true }
)

const handleMenuSelect = (index) => {
  router.push({ name: index })
}

const toggleTheme = (value) => {
  document.documentElement.classList.toggle('dark', value)
}
</script>

<style>
:root {
  --primary-color: #409eff;
  --background-color: #f5f7fa;
  --text-color: #303133;
  --border-color: #dcdfe6;
}

.dark {
  --primary-color: #409eff;
  --background-color: #1e1e1e;
  --text-color: #ffffff;
  --border-color: #4c4c4c;
}

.app-container {
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
}

.header {
  height: 60px;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-container {
  display: flex;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 250px;
  background-color: var(--background-color);
  border-right: 1px solid var(--border-color);
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.menu {
  border-right: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 